<template>
  <div class="user-main">
    <mt-header fixed>
      <span slot="left">{{title}}</span>
      <span slot="right">{{rightLabel?rightLabel:'暂未开通会员'}}</span>
    </mt-header>
    <!-- money -->
    <div class="user-money">
      <div class="user-money-left">
        <span>总金额(元)</span>
        <span>{{(balance.balance+balance.servicefee).toFixed(2)}}</span>
      </div>
      <div class="uesr-border"></div>
      <div class="user-money-right">
				<span>
					<a>本金总额(元)</a>
					<a>{{balance.balance}}</a>
				</span>
        <span>
					<a>佣金总额(金)</a>
					<a>{{balance.servicefee}}</a>
				</span>
        <span>
					<a>推广(金)</a>
					<a>{{balance.spread}}</a>
				</span>
      </div>
    </div>
    <!-- main -->
    <div class="user-oder">
      <div class="user-oder-title">
        <div class="user-oder-box">
          <router-link :to="{name:'orderDetails'}">
            <span class="user-oder-left">

						<a><img src="static/imgs/bian_02.png" alt="" title=""/></a>
						<a>我的订单</a>
					</span>
            <span class="user-oder-right">
						<a>全部订单 ></a>
					</span>
          </router-link>
        </div>
      </div>
      <!-- list -->
      <div class="user-oder-list">
        <ul>
          <li>
            <router-link :to="{name:'orderDetails',query:{type:0}}">
              <div class="user-list-box">
                <div class="user-list-img">
                  <img src="static/imgs/orderCZ.png" alt="" title=""/>
                </div>
                <p>待操作</p>
              </div>
            </router-link>
          </li>
          <li>
            <router-link :to="{name:'orderDetails',query:{type:10}}">
              <div class="user-list-box">
                <div class="user-list-img">
                  <img src="static/imgs/orderFH.png" alt="" title=""/>
                </div>
                <p>待发货</p>
              </div>
            </router-link>

          </li>
          <li>
            <router-link :to="{name:'orderDetails',query:{type:20}}">
              <div class="user-list-box">
                <div class="user-list-img">
                  <img src="static/imgs/orderPJ.png" alt="" title=""/>
                </div>
                <p>待评价</p>
              </div>
            </router-link>
          </li>
          <li>
            <router-link :to="{name:'orderDetails',query:{type:30}}">
              <div class="user-list-box">
                <div class="user-list-img">
                  <img src="static/imgs/orderPJ.png" alt="" title=""/>
                </div>
                <p>待审核</p>
              </div>
            </router-link>

          </li>
          <li>
            <router-link :to="{name:'orderDetails',query:{type:70}}">
              <div class="user-list-box">
                <div class="user-list-img">
                  <img src="static/imgs/orderALL.png" alt="" title=""/>
                </div>
                <p>已完成</p>
              </div>
            </router-link>

          </li>
        </ul>
      </div>
    </div>
    <!-- border -->
    <div class="border-clear"></div>
    <div class="user-oder" v-if="false">
      <div class="user-oder-title">
        <div class="user-oder-box">
					<span class="user-oder-left">
						<a><img src="static/imgs/my_luck1.png" alt="" title=""/></a>
						<a>幸运游戏</a>
					</span>
        </div>
      </div>
      <!-- list -->
      <div class="user-oder-luck">
        <ul>
          <li>
            <div class="luck-img">
              <img src="static/imgs/my_luck2.png" alt="" title=""/>
            </div>
            <p>幸运夺宝</p>
            <p></p>
          </li>
          <li>
            <div class="luck-img">
              <img src="static/imgs/my_luck3.png" alt="" title=""/>
            </div>
            <p>砸金蛋</p>
            <p>(敬请期待)</p>
          </li>
          <li>
            <div class="luck-img">
              <img src="static/imgs/my_luck4.png" alt="" title=""/>
            </div>
            <p>摇摇乐</p>
            <p>(敬请期待)</p>
          </li>
          <li>
            <div class="luck-img">
              <img src="static/imgs/my_luck5.png" alt="" title=""/>
            </div>
            <p>小游戏</p>
            <p>(敬请期待)</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="user-title">我的福利</div>
    <!-- border -->
    <div class="border-clear"></div>
    <!-- otherlist -->
    <div class="user-otherList">
      <ul>
        <li>
          <router-link :to="{name:'redpacket'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/qiandao.png" alt="" title=""/></a>
							<a>签到领红包</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'lottery'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/choujiang2.png" alt="" title=""/></a>
							<a>转盘大抽奖</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="border-clear"></div>
    <div class="user-title">我的账户</div>
    <!-- border -->
    <div class="border-clear"></div>
    <!-- otherlist -->
    <div class="user-otherList">
      <ul>
        <li>
          <router-link :to="{name:'userVip'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/baoshi.png" alt="" title=""/></a>
							<a>我的VIP</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'toMoney'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/tgIndex.png" alt="" title=""/></a>
							<a>分享赚金</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'withdrawDeposit'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/zijin.png" alt="" title=""/></a>
							<a>资金提现</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'restPassword'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/zijin.png" alt="" title=""/></a>
							<a>修改密码</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="border-clear"></div>
    <div class="user-title">绑定信息</div>
    <!-- border -->
    <div class="border-clear"></div>
    <!-- otherlist -->
    <!-- <div class="user-otherList">
      <ul>
        <li>
          <router-link :to="{name:'userInfo'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/bian_01.png" alt="" title=""/></a>
							<a>个人信息</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'toMoney'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/tgIndex.png" alt="" title=""/></a>
							<a>分享赚金</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'withdrawDeposit'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/zijin.png" alt="" title=""/></a>
							<a>资金提现</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>

        </li>
        <li>
          <router-link :to="{name:'userVip'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/baoshi.png" alt="" title=""/></a>
							<a>我的VIP</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>

        </li>
        <li v-if="false">
          <div class="user-otherList-box" >
						<span>
							<a><img src="static/imgs/myIndexSC.png" alt="" title=""/></a>
							<a>精灵商城</a>
							<a class="Hot"><img src="static/imgs/myIndexHot.png"/></a>
						</span>
            <span> <img src="static/imgs/youjiantou.png"/></span>
          </div>
        </li>
        <li>
          <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/bian_03.png" alt="" title=""/></a>
							<a>新手教学</a>
						</span>
            <span> <img src="static/imgs/youjiantou.png"/></span>
          </div>
        </li>
        <li>
          <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/wenhao.png" alt="" title=""/></a>
							<a>帮助</a>
						</span>
            <span> <img src="static/imgs/youjiantou.png"/></span>
          </div>
        </li>
      </ul>
    </div> -->
    <!-- otherlist -->
    <div class="user-otherList">
      <ul>
        <li>
          <router-link :to="{name:'userInfo'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/bian_01.png" alt="" title=""/></a>
							<a>个人信息</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'bindId'}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/tgIndex.png" alt="" title=""/></a>
							<a>实名认证</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'bindBank'}" v-if="bankcardState===1">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/zijin.png" alt="" title=""/></a>
							<a>绑定银行卡</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
          <a @click="showBindBank" v-else>
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/zijin.png" alt="" title=""/></a>
							<a>绑定银行卡</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </a>
        </li>
        <li>
          <router-link :to="{name:'bindTB', query:{type:0}}">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/baoshi.png" alt="" title=""/></a>
							<a>绑定淘宝</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="border-clear"></div>
    <div class="user-title">会员特权</div>
    <!-- border -->
    <div class="border-clear"></div>
    <!-- otherlist -->
    <div class="user-otherList">
      <ul>
        <li>
          <router-link :to="{name:'bindTB', query:{type:1}}" v-if="rightLabel">
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/bian_01.png" alt="" title=""/></a>
							<a>新增绑定淘宝</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
          <a @click="showBindVip" v-else>
            <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/bian_01.png" alt="" title=""/></a>
							<a>新增绑定淘宝</a>
						</span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="border-clear"></div>
    <div class="user-title">会员特权</div>
    <!-- border -->
    <div class="border-clear"></div>
    <!-- otherlist -->
    <div class="user-otherList">
      <ul>
        <li v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">
          <div class="user-otherList-box">
						<span>
							<a><img src="static/imgs/wenhao.png" alt="" title=""/></a>
							<a>点击复制QQ客服号码（2939085757）</a>
						</span>
            <span> <img src="static/imgs/youjiantou.png"/></span>
          </div>
        </li>
        <li>
          <router-link :to="{name:'getstarted'}">
            <div class="user-otherList-box">
              <span>
                <a><img src="static/imgs/bian_03.png" alt="" title=""/></a>
                <a>新手教学</a>
              </span>
              <span> <img src="static/imgs/youjiantou.png"/></span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- border -->
    <div class="border-clear"></div>
    <div class="user-btn" @click="loginOut">退出登录</div>
    <!-- border -->
    <div class="border-clear"></div>
    <index-footer></index-footer>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import {userService,baseService} from '#/service'
  import { Toast } from 'mint-ui'
  import IndexFooter from '@/components/base/IndexFooter'
  import { Session } from "we-plugins";
  export default {
    name: 'user',
    data(){
      return {
        balance:{
          balance:0,
          servicefee:0
        },
        message: '2939085757',
        title: '请绑定身份证',
        rightLabel: '',
        bankcardState: ''
      }
    },
    created(){
      this.loadingBalance()
      const { mobile, name, bankcardState, buyerBankList, memberValid, memberEndDate } = Session.getItem("user")
      this.title = name?name:'请绑定身份证'
      this.rightLabel = memberValid?('会员：'+memberEndDate):''
      this.bankcardState = bankcardState
    },
    methods:{
      ...mapActions(['saveUserInfo']),
      async loginOut(){
        localStorage.setItem('loginInfo', '');
        await baseService.exist({
          success:()=>{
            this.$router.push({
              name:'login'
            })
            setTimeout(()=>{
              this.saveUserInfo(null);
            },300)
          }
        })
      },
      onCopy(e) {
        Toast({
          message: '成功复制QQ号码：' + e.text,
          position: 'middle',
          duration: 2000
        });
      },
      onError (e) {
        Toast({
          message: '复制失败',
          position: 'middle',
          duration: 2000
        });
      },
      loadingBalance(){
        userService.balance({
          success:(res)=>{
            this.balance=res.data
          }
        })
      },
      showBindVip() {
        this.$toast({
          message: '仅开通vip才可新增绑定淘宝账号！',
          position: 'middle',
          duration: 2000
        });
      },
      showBindBank() {
        this.$toast({
          message: '请先绑定身份证信息！',
          position: 'middle',
          duration: 2000
        });
      },
    },
    computed:{
      ...mapGetters([
        'user'
      ])
    },
    components:{
      IndexFooter
    }

  }
</script>

<style lang="less" scoped>
  .user-main {
    width: 100%;
    height: 100%;
    padding-bottom: 0.5rem;
    overflow-y: auto;
    .user-title {
      padding-left: 0.1rem;
      background: #efeef3;
      font-size: 0.12rem;
    }
  }

  .user-money {
    width: 100%;
    height: 1.32rem;
    background: rgb(142,10,190);
  }

  .user-money-left {
    width: 50%;
    float: left;
    height: 100%;
  }

  .user-money-left span {
    display: block;
    text-align: center;
    color: white;
    font-size: 0.2rem;
  }

  .user-money-left span:first-child {
    padding-top: 0.4rem;
  }

  .user-money-left span:last-child {
    margin-top: 0.05rem;
  }

  .uesr-border {
    float: left;
    width: 0.01rem;
    height: 1.08rem;
    background: white;
    margin-top: 0.12rem;
  }

  .user-money-right {
    float: Left;
    width: 49%;
    height: auto;
  }

  .user-money-right span {
    display: block;
    text-align: center;
    color: white;
    font-size: 0.12rem;
  }

  .user-money-right span a {
    display: block;
    margin-bottom: 0.05rem;
  }

  .user-money-right span:first-child {
    padding-top: 0.15rem;
  }

  .user-oder {
    width: 100%;
    height: auto;
    background: white;
    float: left;
  }

  .user-oder-title {
    width: 100%;
    height: 0.52rem;
    border-bottom: 0.01rem solid #e6e6e6;
  }

  .user-oder-box {
    width: 90%;
    margin: 0 auto;
  }

  .user-oder-title span {
    display: block;
    float: left;
    line-height: 0.54rem;
  }

  .user-oder-title span a {
    display: inline-block;
    float: left;
    color: #333;
    font-size: 0.13rem;
  }

  .user-oder-title span a img {
    width: 0.2rem;
    height: 0.2rem;
    display: block;
    margin: 0.15rem 0.05rem 0 0;
  }

  .user-oder-title .user-oder-right {
    float: right;
  }

  .user-oder-list {
    width: 100%;
    height: 0.85rem;
    overflow: hidden;
  }

  .user-oder-list ul li {
    width: 20%;
    float: left;
    height: 100%;
  }

  .user-list-box {
    width: 50%;
    margin: 0.2rem auto 0 auto;
  }

  .user-list-img {
    width: 0.3rem;
    height: 0.30rem;
    margin: 0 auto;
  }

  .user-list-img img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .user-list-box p {
    color: #333;
    font-size: 0.12rem;
    text-align: center;
    margin-top: 0.1rem;
  }

  .border-clear {
    width: 100%;
    height: 0.1rem;
    background: #efeef3;
    float: left;
  }

  .user-oder-luck {
    width: 100%;
    height: 1.02rem;
    overflow: hidden;
  }

  .user-oder-luck ul li {
    width: 25%;
    float: left;
  }

  .luck-img {
    width: 0.3rem;
    height: 0.34rem;
    margin: 0.15rem auto 0 auto;
  }

  .luck-img img {
    width: 100%;
    display: block;
  }

  .user-oder-luck ul li p {
    text-align: center;
    color: #333;
    font-size: 0.14rem;
  }

  .user-oder-luck ul li p:last-child {
    color: #929292;
    font-size: 0.12rem;
    margin-top: 0.03rem;
  }

  .user-otherList {
    width: 100%;
    background: white;
    height: auto;
    overflow: hidden;
  }

  .user-otherList ul li {
    width: 100%;
    height: 0.52rem;
    border-bottom: 0.01rem solid #e6e6e6;
  }
  .user-otherList ul li >a{
    display: block;
    width: 100%;
    height: 100%;
  }

  .user-otherList-box {
    width: 90%;
    margin: 0 auto;
  }

  .user-otherList-box span {
    float: left;
    line-height: 0.52rem;
    font-size: 0.14rem;
    color: #333;
  }

  .user-otherList-box span a {
    display: inline-block;
    float: left;
  }

  .user-otherList-box span a:first-child {
    width: 0.2rem;
    height: 0.2rem;
    margin: 0.15rem 0.05rem 0 0;
  }

  .user-otherList-box span .Hot {
    width: 0.34rem;
    height: 0.14rem;
    margin: 0.15rem 0 0 0.05rem;
  }

  .user-otherList-box span .Hot img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .user-otherList-box span a:first-child img {
    display: block;
    width: 100%;
  }

  .user-otherList-box span:last-child {
    float: right;
    width: 0.07rem;
    height: 0.14rem;
    margin-top: 0.2rem;
  }

  .user-otherList-box span:last-child img {
    display: block;
    width: 100%;
  }

  .user-btn {
    width: 100%;
    height: 0.38rem;
    float: left;
    cursor: pointer;
    line-height: 0.38rem;
    background: white;
    text-align: center;
    color: #4097ff;
    font-size: 0.13rem;
  }
</style>
